<template>
  <j-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    switchFullscreen
    wrapClassName="j-popup-modal"
    :bodyStyle="bodyStyle"
    :fullscreen.sync="fullscreen"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="loading">
      <template v-if="dataSource && dataSource.length>0">
        <template v-for="(item,index) in dataSource">
          <a-row>
            <a-col :span="3" :key="1" style="height: 65px;line-height: 65px;text-align: center">
              {{item.propName}}
            </a-col>
            <a-col :span="1" :key="2" >
              <a-divider type="vertical" style="height: 65px"/>
            </a-col>
            <a-col :span="18" :key="3" style="height: 65px;line-height: 65px">
              <a-radio-group v-if="item.propValList && item.propValList.length > 0" v-model="item.propValId">
                <a-radio v-for="(subItem,subIndex) in item.propValList" :value="subItem.id">{{subItem.name}}</a-radio>
              </a-radio-group>
            </a-col>
            <a-col :span="2" :key="4" style="height: 65px;line-height: 65px">
              <a-button @click="resetPropVal(item.propId)">重置</a-button>
            </a-col>
          </a-row>
          <a-divider />
        </template>
      </template>
    </a-spin>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import {filterObj} from '@/utils/util'
  import md5 from 'md5'

  const MODAL_WIDTH = 1200;
  export default {
    name: 'YqPopupColorSizeSel',
    props: ['propGroupId','materialPropValIds'],
    components:{
    },
    data(){
      return {
        visible:false,
        title:"物料属性选择",
        toggleSearchStatus:false,
        fullscreen:false,
        queryParam:{
        },
        loading: false,
        //数据集
        dataSource: [],
        url: {
          list: '/mdm/color/queryColorSizeComponentData',
        },
        modalWidth:MODAL_WIDTH,
        tableScroll:{x:true},
      }
    },
    mounted() {
    },
    watch: {
    },
    computed:{
      bodyStyle(){
        if(this.fullscreen){
          return {
            height: (window.innerHeight-120) + 'px',
            overflow: 'hidden',
            overflowY: 'scroll',
          }
        }else{
          return{
            height: '500px',
            overflow: 'hidden',
            overflowY: 'scroll',
          }
        }
      }
    },
    methods:{
      loadData() {
        if(!this.propGroupId){
          this.dataSource = []
          return;
        }
        this.loading = true
        getAction('/mdm/materialProp/queryPropComponentDataList', {groupId: this.propGroupId}).then(res=>{
          if (res.success) {
            this.dataSource = res.result
          }
        }).then(() =>{
          if(this.dataSource && this.dataSource.length > 0 && this.materialPropValIds){
            let valIdArr = this.materialPropValIds.split(',')
              this.dataSource.forEach(propData => {
                if(propData.propValList && propData.propValList.length>0){
                  propData.propValList.forEach(propVal => {
                    if(valIdArr.indexOf(propVal.id) != -1){
                      propData.propValId = propVal.id;
                    }
                  })
                }
              })
          }
        }).finally(() => {
          this.loading = false
        })
      },
      resetPropVal(propId){
        const resetPropData = this.dataSource.find( propData => propData.propId === propId);
        if(resetPropData && resetPropData.propValId){
          resetPropData.propValId = null;
        }
      },
      handleCancel() {
        this.close()
      },
      handleSubmit() {
        if(this.dataSource.length == 0){
          this.close()
          return;
        }
        let selectedPropData = this.dataSource.filter( propData => propData.propValId)
        if(!selectedPropData || selectedPropData.length == 0){
          this.$message.warn("请选择属性值!");
          return;
        }
        let val1 = '';
        let val2 = '';
        selectedPropData.forEach(propData => {
          let propValData = propData.propValList.find(propVal => propVal.id === propData.propValId)
          if(propValData){
            val1 += val1 ? (',' + propValData.id) : propValData.id;
            val2 += val2 ? (',' + (propValData.displayName || '')) : (propValData.displayName || '');
          }
        })
        this.$emit('ok', {value : val1, text: val2});
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      show(){
        this.visible = true
        this.loadData()
      },
      handleToggleSearch(){
        this.toggleSearchStatus = !this.toggleSearchStatus;
      },
      searchByquery(){
        this.loadData(1);
      },
    }
  }
</script>

<style scoped>

</style>